<template>
  <!-- 直接渲染已经有的svg -->
  <IconifyIcon
    v-if="!isExt"
    :class="svgClass"
    :icon="iconName"
    v-bind="$attrs"
  />
  <!-- 渲染外部链接的svg -->
  <div
    v-else
    :style="styleExternalIcon"
    :class="svgClass"
    inline-block
    bg-current
    v-bind="$attrs"
  ></div>
</template>

<script setup lang="ts">
import { isExternal } from "@/utils/validate"
import { Icon as IconifyIcon } from "@iconify/vue"
import { computed } from "vue"
// 1.接收树形，name和class
let { iconName, customClass } = defineProps<{
  iconName: string
  customClass?: string
}>()
// 2.判断是否是外链svg
const isExt = computed(() => isExternal(iconName))
// 3.是否增添自定义class
const svgClass = computed(() => (customClass ? `icon ${customClass}` : "icon"))
// 4.如果iconClass是带协议的图标链接，则通过 style css属性方式渲染
const styleExternalIcon = computed(() => ({
  mask: `url(${iconName}) no-repeat 50% 50%`,
  "-webkit-mask": `url(${iconName}) no-repeat 50% 50%`,
  "mask-size": "cover"
}))
</script>
